<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<view class="h45">
					<view class="fix-wrap">
						<scroll-view scroll-x="true" class="h45 scroll-tab">
							<view :class="['item',{'active':type==item.value}]" v-for="(item,index) in filter_data.envtypes" :key="index" @click="filterDataByType(item.value)">
								<view class="name">{{item.label}}</view>
								<view class="active-line"></view>
							</view>
						</scroll-view>

					</view>
				</view>
				<view class="list-wrap">

					<template v-if="initloading.default">
						<loading :loadingState="initloading"></loading>
					</template>

					<template v-else>
						<template v-if="list.length>0">
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="pic">
									<!-- <image v-if="item.last_update_time && item.discern" :src="'https://shibie.honghuoyi.com/image/sb-image.do?path='+item.file_path" mode="widthFix"></image>
									<image v-else :src="'https://shibie.honghuoyi.com/image/image.do?path='+item.file_path" mode="widthFix"></image> -->
									<image :src="getSmallImg(item.photo_path)" mode="heightFix"></image>
								</view>
								<view class="info">
									<view class="name">{{item.photo_date || item.last_update_time}}</view>
									<!-- <view v-if="item.discern" class="pestInfo">
										蚁巢数量：<text class="f-red f-wb">{{item.pest_result_arr.length}}</text>
									</view>
									<view v-else class="pestInfo">未识别到蚁巢</view> -->
									<view class="preview-btn" style="flex: 1;align-items: flex-end;">
										<view class="del m-r2" @click="delPic(item.id)">删除图片</view>
										<view class="preview" @click="previewPic(item.photo_path)">查看大图</view>
									</view>
								</view>
							</view>

							<loading :loadingState="moreloading"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>

					</template>


				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import { HTTP_REQUEST_URL, WEB_HOST, appid, appsecret } from '@/config.js'
	import {
		previewImage
	} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				token: uni.getStorageSync('token'),
				appid: appid,
				appsecret: appsecret,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				initloading: { default: true },
				moreloading: { loading: false, completed: false },
				list: [],
				page: 1,
				limit: 10,
				total: 0,
				type: 1, //1.虫情  2.苗情
				filter_data: {
					all_active: 0,
					pro_active: 2,
					sta_active: 0,
					isShowFilter: false,
					isShowProjectType: false,
					isShowProjectStatus: false,
					envtypes: [
						// { check: false, label: '全部', value: '0', },
						{ check: true, label: '虫情识别', value: '1', },
						{ check: false, label: '苗情识别', value: '2', },
					],
					select_envtypes: '',
					is_pass: ''
				},
				// getSmallImg:(path)=> {
				// 	return `https://www.agri120.org/image/compress.html?from=yoneup&path=${path}&shuiyin=1`
				// },
				// getSbImg:(path)=> {
				// 	return `https://www.agri120.org/image/preview.html?from=yoneup&path=${path}&shuiyin=1&show=1`
				// },
			}
		},
		onShow() {

		},
		onReachBottom() {
			// if (this.loadingState.completed) {
			// 	this.page = 1;
			// 	return false
			// } else {
			// 	this.page++;
			// 	this.getUserSbYcList();
			// 	if (this.list.length < this.total && this.list.length > 0) {
			// 		this.page++;
			// 		this.getUserSbYcList();
			// 	}
			// }
		},
		async onLoad(params) {
			this.type = params?.type || 1;
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getUserSbYcList();
			}

		},
		methods: {

			dataInit: function() {
				this.initloading = { default: true };
				this.moreloading = { loading: false, completed: false };
				this.list = [];
				this.total = 0;
				this.page = 1;
			},

			getSmallImg(path) {
				let imgFromObj = {
					1: 'yoneup',
					2: 'yonemiaoqing'
				}
				return `https://www.agri120.org/image/compress.html?from=${imgFromObj[this.type]}&path=${path}&shuiyin=1`
			},
			getSbImg(path) {
				let imgFromObj = {
					1: 'yoneup',
					2: 'yonemiaoqing'
				}
				return `https://www.agri120.org/image/preview.html?from=${imgFromObj[this.type]}&path=${path}&shuiyin=1&show=1`
			},

			filterDataByType: function(protype) {
				if (protype == this.type) return
				this.filter_data.envtypes.forEach(item => {

					if (item.value == protype) {
						this.type = protype;
						this.dataInit();
						this.getUserSbYcList();
					}
				})
			},

			// 获取列表
			getUserSbYcList: async function() {
				let params = {
					appid: this.appid,
					uid: this.userInfo.uid,
					token: this.token,
					page: this.page,
					limit: this.limit,
					type: this.type
				}
				console.log('params', params);
				console.log('list-length', this.list.length);
				this.moreloading.loading = this.list.length > 0;
				let res = await this.$api.pho_api.userSb(params).finally(() => {
					this.initloading.default = false;
					this.moreloading.loading = false;
				})
				console.log('res', res);
				if (res.data.ret == 1000) {
					this.list = this.list.concat(res.data?.data || []);
					this.total = res.data.total;
					if (this.list.length >= res.data.total) {
						this.moreloading.completed = true;
					}
				}
			},

			// 删除图片
			delPic: async function(id) {
				let _this = this;
				uni.showModal({
					content: "确定删除该图片吗？",
					mask: true,
					async success(m_res) {
						if (m_res.confirm) {
							let params = {
								appid: _this.appid,
								uid: _this.userInfo.uid,
								id: id,
								token: _this.token,
								type: _this.type
							}
							console.log('delpic-parmas',params);
							let res = await _this.$api.pho_api.delPic(params).catch(() => {})
							console.log('delpic', res);
							if (res.data.ret == 1000) {
								uni.showToast({
									icon: 'success',
									title: '删除成功',
									mask: true,
									success() {
										_this.dataInit();
										_this.getUserSbYcList();
									}
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.message,
									mask: true,
									duration: 1000,
									success() {}
								})
							}
						}
					}
				})

			},

			// 预览结果图片
			previewPic: function(path) {
				let _this = this;
				previewImage({
					data: [_this.getSbImg(path)],
					index: 0
				})
			},

		},
		computed: {

		},
		watch: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.scroll-tab {
		.active-line {
			// position: inherit!important;
			left: 0px !important;
			width: 100% !important;
		}

		.item {
			margin: 0 10px;
		}
	}

	.list-wrap {
		padding-top: 20rpx;

		.item {
			display: flex;
			padding: 20rpx;
			margin-bottom: 20rpx;
			background: #fff;

			.pic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30%;
				max-width: 180rpx;
				aspect-ratio: 1;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				flex-grow: 2;
				display: flex;
				flex-direction: column;

				.name {
					margin-bottom: 20rpx;
					font-size: 30rpx;
				}

				.pestInfo {
					display: flex;
					// margin-bottom: 30rpx;
					font-size: 28rpx;
					color: #666;
				}

				.preview-btn {
					display: flex;
					justify-content: flex-end;

					.preview,
					.del {
						width: 140rpx;
						font-size: 30rpx;
						border-radius: 8rpx;
						color: #fff;
						text-align: center;
					}

					.preview {
						background: #f00;
					}

					.del {
						background: #09f;
					}
				}

			}
		}
	}
</style>